<template>
	<div class="commoditysearchstyle">
		<!-- 标题 -->
		<h2>{{ datas.text }}</h2>

		<!-- 表单 -->
		<el-form label-width="80px" :model="datas" size="small">
			 <!-- 框体样式 -->
			<el-form-item class="lef" label="框体样式">
				<el-radio-group v-model="datas.shape" size="mini">
					<el-radio label="square">方框</el-radio>
					<el-radio label="round">圆框</el-radio>
				</el-radio-group>
			</el-form-item>

			<div style="height: 10px" />
			<!--        <el-form-item class="lef" label="清除按钮">-->
			<!--          <el-switch v-model="datas.clearable"></el-switch>-->
			<!--        </el-form-item>-->
			<!--        <div style="height: 10px"/>-->

			<!-- 背景颜色 -->
			<el-form-item class="lef" label="背景颜色">
				<!-- 颜色选择器 -->
				<el-color-picker v-model="datas.backgroundColor" show-alpha :predefine="predefineColors">
				</el-color-picker>
			</el-form-item>


		</el-form>
	</div>
</template>

<script>
	import vuedraggable from 'vuedraggable' //拖拽组件

	export default {
		name: 'commoditysearchstyle',
		props: {
			datas: Object,
		},
		components: {
			vuedraggable
		},
		data() {
			return {
				predefineColors: [
					// 颜色选择器预设
					'#ff4500',
					'#ff8c00',
					'#ffd700',
					'#90ee90',
					'#00ced1',
					'#1e90ff',
					'#c71585',
					'#409EFF',
					'#909399',
					'#C0C4CC',
					'rgba(255, 69, 0, 0.68)',
					'rgb(255, 120, 0)',
					'hsv(51, 100, 98)',
					'hsva(120, 40, 94, 0.5)',
					'hsl(181, 100%, 37%)',
					'hsla(209, 100%, 56%, 0.73)',
					'#c7158577',
				],

			}
		},
		methods: {},
	}
</script>

<style scoped lang="less">
	.commoditysearchstyle {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		padding: 0 10px 20px;
		box-sizing: border-box;
		/* 标题 */

		h2 {
			padding: 24px 16px 24px 0;
			margin-bottom: 15px;
			border-bottom: 1px solid #f2f4f6;
			font-size: 18px;
			font-weight: 600;
			color: #323233;
		}

		/* 上传图片按钮 */

		.uploadImg {
			width: 345px;
			height: 40px;
			margin-top: 10px;
		}

		/* 热词列表 */

		.imgList {
			padding: 6px 12px;
			margin: 16px 7px;
			border-radius: 2px;
			background-color: #fff;
			box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
			display: flex;
			position: relative;

			/* 删除图标 */

			.el-icon-circle-close {
				position: absolute;
				right: -10px;
				top: -10px;
				cursor: pointer;
				font-size: 19px;
			}

			/* 热词文字 */

			.imgText {
				width: 100%;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
				justify-content: space-between;
			}
		}

		/* 图片样式 */

		.weiz {
			display: flex;
			justify-content: space-between;

			i {
				padding: 5px 12px;
				margin-left: 10px;
				border-radius: 0;
				border: 1px solid #ebedf0;
				font-size: 20px;
				font-weight: 500;
				cursor: pointer;

				&:last-child {
					font-size: 22px;
				}

				&.active {
					color: #155bd4;
					border: 1px solid #155bd4;
					background: #e0edff;
				}
			}
		}

		.lef {
			::v-deep  .el-form-item__label {
				text-align: left;
			}
		}

		/* 颜色选择器 */

		.picke {
			float: right;
		}
	}
</style>